<template>
  <a-upload
    name="avatar"
    list-type="picture-card"
    class="avatar-uploader"
    :show-upload-list="false"
    @change="handleChange"
    :customRequest="customRequests"
  >
    <div v-if="url">
      <video v-if="type == 'video'" class="images" :src="url" alt="avatar"></video>
      <img v-else class="images" :src="url" alt="avatar" />
    </div>
    <div v-else>
      <a-icon :type="loading ? 'loading ' : 'plus'" />
      <div class="ant-upload-text">上传</div>
    </div>
  </a-upload>
</template>

<script>
import { getUploadSts } from '@/api/brand.js'
import CryptoJS from 'crypto-js'
const OSS = require('ali-oss')
export default {
  name: 'upImages',
  props: ['url', 'type', 'signs'],
  data() {
    return {
      loading: false
    }
  },
  created() {},
  methods: {
    handleChange() {},
    customRequests(info) {
      getUploadSts({ brand_id: process.env.VUE_APP_BRAND_ID }).then(res => {
        this.setoss(res.data, info.file, url => {
          this.$emit('update:url', url)
        })
      })
    },
    async setoss(res, data, fn) {
      var ars = data.name.split('.')
      var paths = this.signs == 1 ? '/uploads/8/avatar/' : '/'
      var names = paths + CryptoJS.MD5(ars[0]).toString() + '.' + ars[1]
      var urls = res.domain + names
      const client = new OSS({
        // yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
        region: res.region,
        // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
        accessKeyId: res.AccessKeyId,
        accessKeySecret: res.AccessKeySecret,
        // 从STS服务获取的安全令牌（SecurityToken）。
        stsToken: res.SecurityToken,
        // 填写Bucket名称。
        bucket: res.bucket
      })

      try {
        // 填写Object完整路径。Object完整路径中不能包含Bucket名称。
        // 您可以通过自定义文件名（例如exampleobject.txt）或文件完整路径（例如exampledir/exampleobject.txt）的形式实现将数据上传到当前Bucket或Bucket中的指定目录。
        // data对象可以自定义为file对象、Blob数据或者OSS Buffer。
        const options = {
          meta: { temp: 'demo' },
          mime: 'json',
          headers: { 'Content-Type': 'text/plain' }
        }
        const result = await client.put(names, data, options)
        console.log(result)
        fn(urls)
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.images {
  width: 96px;
  height: 96px;
}
</style>
